<template>
  <div class="demo-pagination-block">
    <el-pagination
        v-model:current-page="pageData.currentPage"
        v-model:page-size="pageData.pageSize"
        :page-sizes="defaultSelect"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {PageInfo} from "@/types";

const page = defineProps({
  pageData: {
    required: true,
    type: Object
  }
})

const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const defaultSelect = ref([10, 20, 30, 40])

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped lang="less">
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
